<?xml version="1.0" encoding="UTF-8"?>
<!--
  Created by IntelliJ IDEA.
  User: lukman
  Date: 6/23/11
  Time: 12:36 PM
-->
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
        >

<h:head>
    <title>Anasit</title>
    <link rel="stylesheet" type="text/css" href="#{request.contextPath}/resources/css/maintheme.css"/>
</h:head>
<h:body>
    <h:form>
        <p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rowsPerPageTemplate="5,10,15"
                     selection="#{tableBean.selectedCar}" selectionMode="single"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     onRowSelectUpdate="display" onRowSelectComplete="carDialog.show()">

            <f:facet name="header">
                List of Cars
            </f:facet>

            <p:column sortBy="#{car.model}" filterBy="#{car.model}">
                <f:facet name="header">
                    <h:outputText value="Model"/>
                </f:facet>
                <h:outputText value="#{car.model}"/>
            </p:column>

            <p:column sortBy="#{car.year}" filterBy="#{car.year}">
                <f:facet name="header">
                    <h:outputText value="Year"/>
                </f:facet>
                <h:outputText value="#{car.year}"/>
            </p:column>

            <p:column sortBy="#{car.manufacturer}" filterBy="#{car.manufacturer}">
                <f:facet name="header">
                    <h:outputText value="Manufacturer"/>
                </f:facet>
                <h:outputText value="#{car.manufacturer}"/>
            </p:column>

            <p:column sortBy="#{car.color}" filterBy="#{car.color}">
                <f:facet name="header">
                    <h:outputText value="Color"/>
                </f:facet>
                <h:outputText value="#{car.color}"/>
            </p:column>

        </p:dataTable>

        <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
                  width="200" showEffect="explode" hideEffect="explode">

            <h:panelGrid id="display" columns="2" cellpadding="4">

                <f:facet name="header">
                    <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                </f:facet>

                <h:outputText value="Model:"/>
                <h:outputText value="#{tableBean.selectedCar.model}"/>

                <h:outputText value="Year:"/>
                <h:outputText value="#{tableBean.selectedCar.year}"/>

                <h:outputText value="Manufacturer:"/>
                <h:outputText value="#{tableBean.selectedCar.manufacturer}"/>

                <h:outputText value="Color:"/>
                <h:outputText value="#{tableBean.selectedCar.color}"/>
            </h:panelGrid>
        </p:dialog>

    </h:form>

</h:body>

</html>